<template>
  <a-modal
    title="值班详情"
    :width="1500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :footer="false"
  >
    <a-list size="large" bordered style="border-bottom: none">
      <a-list-item>
        <h3 style="margin: auto">{{ title || "" }}</h3>
      </a-list-item>
      <a-list-item>
        <span>{{ content.leader }}</span>
        <span>{{ content.phone }}</span>
      </a-list-item>
    </a-list>
    <a-table
      ref="table"
      bordered
      :data-source="sourceData"
      :columns="columns"
      :rowKey="(record, index) => index"
      :pagination="false"
    >
      <span slot="workers" slot-scope="text">
        <span>{{ text && text.replace(/[ ]/g, "、") }}</span>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { viewDuty } from '@/api/system/duty';

const columns = [
  { title: '日期', dataIndex: 'dutyTime', align: 'center', width: 100 },
  { title: '带班领导', dataIndex: 'dutyLeader', align: 'center', width: 100 },
  { title: '联系电话', dataIndex: 'leaderPhone', align: 'center', width: 100 },
  { title: '值班人员', dataIndex: 'dutyMember', align: 'center', width: 200, scopedSlots: { customRender: 'workers' } },
];

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      sourceData: [],
      // 表头
      columns: columns,
      title: '',
      content: {
        leader: '值班总负责：',
        phone: '值班室电话：'
      },
    }
  },
  methods: {
    handleSubmit() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
      this.content = {
        leader: '值班总负责：',
        phone: '值班室电话：'
      };
    },
    getDetail(_id) {
      viewDuty({ _id, }).then(res => {
        this.sourceData = res.data;
      })
    },
    // 初始化方法
    detail(record) {
      this.visible = true;
      this.getDetail(record._id);
      this.title = record.title;
      this.content.leader = this.content.leader + (record.chargePerson || '');
      this.content.phone = this.content.phone + (record.phone || '');
    },
  },
}
</script>

<style lang="scss" scoped>
.ant-list-item {
  justify-content: space-around;
}
>>> .ant-tabs-nav {
  width: 100%;
}
>>> .ant-tabs-tab {
  width: 50%;
  text-align: center;
  margin: 0;
}
</style>
